<!-- 市场佣金表 -->
<template>
  <div class="transactionCommissionTable">
    <div>
      报表名称
      <el-input class="w200 ml20 mr20" v-model="reportName"></el-input>
      <el-button type="primary" @click="searchData" id="monitorEnter">查询</el-button>
      <el-button type="primary" @click="createReport">生成报表</el-button>
    </div>
    <el-table :data="tcTableData" class="mt20" border style="width: 100%">
      <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
      <el-table-column prop="reportFormName" align="center" label="报表名称" width="300"></el-table-column>
      <el-table-column prop="month" align="center" label="月份"></el-table-column>
      <el-table-column prop="businessAmount" align="center" label="市场佣金发放明细表">
        <template slot-scope="scope">
          <a href="javascript:;;" @click="goDetail(scope.row.month, 1, scope.row.settlementFlag)">{{scope.row.businessAmount}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="publicAmount" align="center" label="公佣发放明细">
        <template slot-scope="scope">
          <a href="javascript:;;" @click="goDetail(scope.row.month, 2, scope.row.settlementFlag)">{{scope.row.publicAmount}}</a>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="goDetail(scope.row.month, 0)">查看</el-button>
          <el-button type="text" @click="reportTable(scope.row.month)">导出</el-button>
          <el-button type="text" :disabled="scope.row.settlementFlag === 1" @click="settlement(scope.row.id)">结算</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagebar">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page.sync="tableConfig.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="tableConfig.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="tableConfig.totalSize"
      ></el-pagination>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import api from "@/api/apiPath";
import utils from '@/common/utils'
export default {
  name: "marketCommissionTable",
  title: "市场佣金",
  data() {
    return {
      reportName: "",
      tcTableData: [],
      tableConfig: {
        startTime: "",
        endTime: "",
        pageNum: 1,
        pageSize: 10,
        totalSize: 10
      }
    };
  },
  created() {
    this.getDealAllotReportList();
  },
  activated() {
    this.getDealAllotReportList();
  },
  mounted() {},
  methods: {
    reportTable(month) {
      this.$axios
        .service({
          method: "get",
          url:"/commallocation/batch/export/dealBatchExport?reportType=4&month=" + month,
          responseType: "blob"
        })
        .then(res => {
          this.downloadFile(res.data);
        })
        .catch(res => {
          // 返回的是流文件 全局的 响应拦截 方法不适用 需要在 catch 中拿数据
          this.downloadFile(res.data);
        });
    },
    downloadFile(data) {
      if (!data) {
        this.$message({
          message: "导出失败",
          type: "error"
        });
        return;
      }
      let url = window.URL.createObjectURL(new Blob([data]));
      let link = document.createElement("a");
      let fileName = `导出${utils.getTimeString(new Date())}.zip`;
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", fileName);
      document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href);
      document.body.removeChild(link);
      this.$message({
        message: "导出成功",
        type: "success"
      });
    },
    settlement(id) {
      this.$confirm("是否结算，结算后不可更改报表，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios.post("/commallocation/marketAllot/report/settlement",{id:id,settlementFlag:1}).then(res => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.getDealAllotReportList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    goDetail(month, type,settlementFlag) {
      this.$router.push({
        path: "./marketCommissionDetailTable",
        query: { month, index: type, settlementFlag}
      });
    },
    createReport() {
      this.$router.push({ path: "./marketCommissionReport" });
    },
    searchData() {
      this.tableConfig.pageNum = 1;
      this.getDealAllotReportList();
    },
    getDealAllotReportList() {
      this.axios
        .post(api.marketCommissionTableReportList, {
          reportName: this.reportName,
          pageNum: this.tableConfig.pageNum,
          pageSize: this.tableConfig.pageSize
        })
        .then(res => {
          console.log(res);
          this.tcTableData = res.data.data.list;
          this.tableConfig.totalSize = res.data.data.total;
        });
    },
    handleSizeChange(size) {
      this.tableConfig.pageSize = size;
      this.getDealAllotReportList();
    },
    handleCurrentChange(page) {
      this.tableConfig.pageNum = page;
      this.getDealAllotReportList();
    }
  },
  components: {},
  computed: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus"></style>
